﻿<!DOCTYPE html>
<html lang="en" xmlns:price="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- Latest Bootstrap min CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css">
    <!-- Dropdownhover CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap-dropdownhover.min.css" type="text/css">
    <!-- latest fonts awesome -->
    <link rel="stylesheet" href="assets/font/css/font-awesome.min.css" type="text/css">
    <!-- simple line fonts awesome -->
    <link rel="stylesheet" href="assets/simple-line-icon/css/simple-line-icons.css" type="text/css">
    <!-- stroke-gap-icons -->
    <link rel="stylesheet" href="assets/stroke-gap-icons/stroke-gap-icons.css" type="text/css">
    <!-- Animate CSS -->
    <link rel="stylesheet" href="assets/css/animate.min.css" type="text/css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css" type="text/css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="assets/css/slider.css" type="text/css">
    <!--  baguetteBox -->
    <link rel="stylesheet" href="assets/css/baguetteBox.css">
    <!-- Owl Carousel Assets -->
    <link href="assets/owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="assets/owl-carousel/owl.theme.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<!-- 导入页眉 -->
<div class="header"></div>
<!-- newsletter -->
<section class="shopping-cart">
    <!-- .shopping-cart -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">首页</a></li>
                    <li class="breadcrumb-item active">类别</li>
                </ol>
            </div>
            <div class="col-md-12" id="shopCart">
                <h2>你的购物车</h2>
                <table>
                    <thead>
                    <tr>
                        <th></th>
                        <th></th>
                        <th>商品名称</th>
                        <th>尺寸</th>
                        <th>商品价格</th>
                        <th>数量</th>
                        <th>总价</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-if="shopCartList===0">
                        <th colspan="3">
                            您的购物车空空如也~~快去购物吧！
                        </th>
                    </tr>
                    <tr v-else>
                    <tr v-for="(shopCart,index) in shopCartList" v-if="index===0">
                        <!--第一条输出-->
                        <td>
                            <button type="button" @click="allSelect(shopCartList[index].goods.sellerId)"
                                    class="btn btn-outline-info">
                                全选该店铺
                            </button>
                            <button type="button" @click="allCancel(shopCartList[index].goods.sellerId)"
                                    class="btn-danger">
                                取消全选
                            </button>
                            <br>
                            <input  class="box" type="checkbox" :value="shopCart.goodsId"
                                   :name="shopCartList[index].goods.sellerId">
                        </td>
                        <td>

                            <img :src="shopCart.goods.headUrl" alt="13" style="width: 150px;height:150px;">
                        </td>
                        <td><a :href="'shop-detail.html?id='+shopCart.goodsId">{{shopCart.goods.name}}</a></td>
                        <td>{{shopCart.goods.size}}<br/></td>
                        <td>
                            <div v-if="shopCart.goods.currentPrice ===null">
                                <strong>${{shopCart.goods.originalPrice}}.00</strong><br>
                            </div>
                            <div v-else>
                                <strong>${{shopCart.goods.currentPrice}}.00</strong><br>
                                <small style="color: red">
                                    <del>${{shopCart.goods.originalPrice}}.00</del>
                                </small>
                            </div>
                        </td>
                        <td><input class="num" :id="shopCart.goodsId" type="number" name="quantity" min="1"
                                   max="500"
                                   v-model="shopCart.goodsNum" @click="getValue"></td>
                        <div style="display: none"></div>
                        <td :id="'tr-'+shopCart.goodsId" v-if="shopCart.goods.currentPrice ===null">
                            {{shopCart.goods.originalPrice*shopCart.goodsNum}}
                        </td>
                        <td :id="'tr-'+shopCart.goodsId" v-else>
                            {{shopCart.goods.currentPrice*shopCart.goodsNum}}
                        </td>
                        <td>
                                                    <span class="red">
                                                        <button @click="deleteGoods(shopCart.goodsId)">
                                                            <i class="fa fa-times" aria-hidden="true"></i>
                                                        </button>
                                                    </span>
                        </td>

                    <tr v-else-if="index>0&&shopCartList[index].goods.sellerId==shopCartList[index-1].goods.sellerId">
                        <td>
                            <!--<button type="button" @click="allSelect(shopCartList[index].goods.sellerId)" class="btn btn-outline-info">
                                全选该店铺
                            </button>
                            <button type="button" @click="allCancel(shopCartList[index].goods.sellerId)" class="btn btn-outline-danger">
                                取消全选
                            </button>
                            &lt;!&ndash;<button @click="allCancel(shopCartList[index].goods.sellerId)" class="btn-danger">
                                X
                            </button>&ndash;&gt;-->
                            <input class="box" type="checkbox" :value="shopCart.goodsId"
                                   :name="shopCartList[index].goods.sellerId">
                        </td>
                        <td>
                            <img :src="shopCart.goods.headUrl" alt="13" style="width: 150px;height:150px;">
                        </td>
                        <td><a :href="'shop-detail.html?id='+shopCart.goodsId">{{shopCart.goods.name}}</a></td>
                        <td>{{shopCart.goods.size}}<br/></td>
                        <td>
                            <div v-if="shopCart.goods.currentPrice ===null">
                                <strong>${{shopCart.goods.originalPrice}}.00</strong><br>
                            </div>
                            <div v-else>
                                <strong>${{shopCart.goods.currentPrice}}.00</strong><br>
                                <small style="color: red">
                                    <del>${{shopCart.goods.originalPrice}}.00</del>
                                </small>
                            </div>
                        </td>
                        <td><input class="num" :id="shopCart.goodsId" type="number" name="quantity" min="1"
                                   max="500"
                                   v-model="shopCart.goodsNum" @click="getValue"></td>
                        <div style="display: none"></div>
                        <td :id="'tr-'+shopCart.goodsId" v-if="shopCart.goods.currentPrice ===null">
                            {{shopCart.goods.originalPrice*shopCart.goodsNum}}
                        </td>
                        <td :id="'tr-'+shopCart.goodsId" v-else>
                            {{shopCart.goods.currentPrice*shopCart.goodsNum}}
                        </td>
                        <td>
                        <span class="red">
                            <button @click="deleteGoods(shopCart.goodsId)">
                                <i class="fa fa-times" aria-hidden="true"></i>
                            </button>
                        </span>
                        </td>
                    </tr>
                    <tr v-else>
                        <td>
                            <button type="button" @click="allSelect(shopCartList[index].goods.sellerId)"
                                    class="btn btn-outline-info">
                                全选该店铺
                            </button>
                            <button type="button" @click="allCancel(shopCartList[index].goods.sellerId)"
                                    class="btn-danger">
                                取消全选
                            </button>
                            <br>
                            <input class="box" type="checkbox" :value="shopCart.goodsId"
                                   :name="shopCartList[index].goods.sellerId">

                        </td>
                        <td>
                            <img :src="shopCart.goods.headUrl" alt="13" style="width: 150px;height:150px;">
                        </td>
                        <td><a :href="'shop-detail.html?id='+shopCart.goodsId">{{shopCart.goods.name}}</a></td>
                        <td>{{shopCart.goods.size}}<br/></td>
                        <td>
                            <div v-if="shopCart.goods.currentPrice ===null">
                                <strong>${{shopCart.goods.originalPrice}}.00</strong><br>
                            </div>
                            <div v-else>
                                <strong>${{shopCart.goods.currentPrice}}.00</strong><br>
                                <small style="color: red">
                                    <del>${{shopCart.goods.originalPrice}}.00</del>
                                </small>
                            </div>
                        </td>
                        <td><input class="num" :id="shopCart.goodsId" type="number" name="quantity" min="1"
                                   max="500"
                                   v-model="shopCart.goodsNum" @click="getValue"></td>
                        <div style="display: none"></div>
                        <td :id="'tr-'+shopCart.goodsId" v-if="shopCart.goods.currentPrice ===null">
                            {{shopCart.goods.originalPrice*shopCart.goodsNum}}
                        </td>
                        <td :id="'tr-'+shopCart.goodsId" v-else>
                            {{shopCart.goods.currentPrice*shopCart.goodsNum}}
                        </td>
                        <td>
                        <span class="red">
                            <button @click="deleteGoods(shopCart.goodsId)">
                                <i class="fa fa-times" aria-hidden="true"></i>
                            </button>
                        </span>
                        </td>
                    </tr>
                    </tr>

                    <!--Modal
                    <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false"
                         tabindex="-1" role="dialog"
                         aria-labelledby="staticBackdropLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="staticBackdropLabel">删除宝贝</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    真的要删除宝贝吗？
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">算了吧~</button>
                                    <button type="button" class="btn btn-primary" @click="delete(shopCart.goodsId)">
                                        删除！！
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>-->
                    </tr>
                    </tr>
                    </tbody>
                </table>
                <div class="col-sm-6 col-md-6">
                    <a href="index.html" class="button red">继续购物</a>
                </div>
                <div class="col-sm-6 col-md-6 text-right">
                    <button class="button" @click="deleteGoodsList">删除商品</button>
                    <button class="button" @click="deleteAll">清空购物车</button>
                </div>
                <a name="checkout"></a>
                <div id="checkout" class="col-sm-4 col-md-4">
                    <div class="shipping-outer">
                        <h2>Cart totals</h2>
                        <ul>
                            <!--<li>Cart Subtotal: <strong>$640.00</strong></li>-->
                            <!--<li>Shipping and Handling: <strong>$10.00</strong></li>-->
                            <li>Cart Totals: <strong>${{TotalPrice}}.00</strong></li>
                            <li class="text-center">
                                <button type="button" @click="totalPrice" style="width: 150px">合计总价</button>
                                <a type="button" class="btn btn-danger"
                                   style="width: 150px;color: whitesmoke" @click="checkOut">结算</a>
                                <!--<a href="#">Checkout with mutilple adresses</a>-->
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- /.shopping-cart -->
</section>
<!-- newsletter -->
<!-- 导入页脚 -->
<div class="footer"></div>
<!-- sticky-socia -->
<aside id="sticky-social">
    <ul>
        <!--<li><a href="#" class="fa fa-facebook" target="_blank"><span><i class="fa fa-facebook" aria-hidden="true"></i> Facebook</span></a>
        </li>
        <li><a href="#" class="fa fa-twitter" target="_blank"><span><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</span></a>
        </li>
        <li><a href="#" class="fa fa-rss" target="_blank"><span><i class="fa fa-rss" aria-hidden="true"></i> RSS</span></a>
        </li>
        <li><a href="#" class="fa fa-pinterest-p" target="_blank"><span><i class="fa fa-pinterest-p"
                                                                           aria-hidden="true"></i> Pinterest</span></a>
        </li>
        <li><a href="#" class="fa fa-share-alt" target="_blank"><span><i class="fa fa-share-alt" aria-hidden="true"></i> Flickr</span></a>
        </li>-->
    </ul>
</aside>
<!-- /sticky-socia -->
<p id="back-top"><a href="#top"><i class="fa fa-chevron-up" aria-hidden="true"></i></a></p>
<div class="p-4" style="position: fixed;right: 20px;bottom: 300px;">
    <h4 class="font-italic">立即结算</h4>
    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor"
         class="bi bi-arrow-bar-down" viewBox="0 0 16 16">
        <a href="#checkout">
            <path fill-rule="evenodd"
                  d="M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5zM8 6a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 .708-.708L7.5 12.293V6.5A.5.5 0 0 1 8 6z"/>
        </a>
    </svg>
</div>
<script src="assets/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-dropdownhover.min.js"></script>
<!-- Plugin JavaScript -->
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<!-- owl carousel -->
<script src="assets/owl-carousel/owl.carousel.js"></script>
<!--  Custom Theme JavaScript  -->
<script src="assets/js/filter-price.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/util/http-util.js"></script>
<!--导入vue 包-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</body>

</html>
<script type="text/javascript">
    //在js中引入页眉页脚
    $(document).ready(function () {
        $('.header').load('header.html');
        $('.footer').load('footer.html');
    });

    var arr = [];
    var vm = new Vue({
            el: "#shopCart",
            data: {
                shopCartList: [],
                TotalPrice: "0",
            },
            methods: {
                shopCartShow: function () {
                    let url = "shopCartShow";
                    let thisObj = this;
                    doGet(url, function (resp) {
                        thisObj.shopCartList = resp;
                        console.log(thisObj.shopCartList);

                        console.log(thisObj.shopCartList.goods);
                        //分商家思路,获取length
                        let length = thisObj.shopCartList.length;
                        console.log(length);
                        //v-if判断是否第一个，第一个直接输出，第二个判断是否与前一个商家id相同，相同则同div块输出，不同就分一块新的div
                        console.log(thisObj.shopCartList[0].goods.sellerId);
                        //你的list里面的goods还是object，我就不看了，自己搞搞
                        //vue里面应该可以直接打印在控制台看thisObj.shopCartList[index-1].goods.sellerId   thisObj.shopCartList[length].goods.sellerId
                    })
                },
                unLogin: function () {
                    let url="unLogin";
                    doGet(url,function (resp) {
                        console.log(resp);
                    })
                },
                deleteGoods: function (goodsId) {
                    let url = "delete";
                    let thisObj = this;
                    let params = {updateIds: goodsId};
                    doPost(url, params, function (resp) {
                        location.href = "http://localhost:8080/view_api/shopping-cart.html"
                        console.log(resp)
                    })
                },
                deleteGoodsList: function () {
                    var box = $('.box');
                    /*var arr = [];*/
                    for (i = 0; i < box.length; i++) {
                        if (box[i].checked == true) {
                            arr.push(box[i].value);
                        }
                    }
                    let url = "delete";
                    let thisObj = this;
                    let params = {updateIds: arr};
                    doPost(url, params, function (resp) {
                        location.href = "http://localhost:8080/view_api/shopping-cart.html";
                        console.log(resp);
                        alert("删除成功")
                    })
                },
                getValue: function (e) {
                    let that = e.target;
                    let num = that.value;
                    console.log(num);
                    let goodsId = $(that).attr("id");
                    console.log(goodsId);
                    let url = "addOrReduceNum";
                    let params = {goodsNum: num, goodsId: goodsId};
                    doPost(url, params, function (resp) {
                        console.log(resp)
                    })
                },
                totalPrice: function () {
                    this.TotalPrice = 0;
                    arr = [];
                    var box = $('.box');
                    for (i = 0; i < box.length; i++) {
                        if (box[i].checked == true) {
                            arr.push(box[i].value);
                        }
                    }
                    for (i = 0; i < arr.length; i++) {
                        this.TotalPrice = parseInt($("#tr-" + arr[i]).text()) + parseInt(this.TotalPrice);
                    }
                    console.log(this.TotalPrice);
                },
                checkOut: function () {
                    console.log(this.TotalPrice);
                    let url = "delete";
                    arr = [];
                    let arrSeller = [];
                    let array = [];

                    var box = $('.box');
                    for (i = 0; i < box.length; i++) {
                        if (box[i].checked == true) {
                            arr.push(box[i].value);
                            arrSeller.push(box[i].name);
                        }
                    }
                    console.log(arr[0]);
                    for (k = 0; k < arr.length; k++) {
                        if (array == null) {
                            array.push({sellerId: arrSeller[0], id: arr[0]});
                        } else if (arrSeller[k] == arrSeller[k - 1]) {
                            array.push({sellerId: arrSeller[k], id: arr[k]});
                        } else if (arrSeller[k] != arrSeller[k - 1]) {
                            array.push({sellerId: arrSeller[k], id: arr[k]});
                        }
                    };
                    console.log(array);
                    //将array存入localStorage
                    localStorage.setItem('GoodsList', JSON.stringify(array));
                    //取出将array存入localStorage
                    let getData = localStorage.getItem('GoodsList');
                    console.log(getData);
                    let params = {updateIds: arr};
                    doPost(url, params, function (resp) {
                        console.log(resp);
                    });
                    location.href = "http://localhost:8080/view_api/checkout.html";
                },
                allSelect: function (sellerId) {
                    var box = $('.box');
                    console.log(box[0].name);
                    console.log(box.get(0));
                    for (i = 0; i < box.length; i++) {
                        if (box[i].name == sellerId) {
                            box[i].checked = true;
                        }
                    }
                },
                allCancel: function (sellerId) {
                    var box = $('.box');
                    console.log(box[0].name);
                    console.log(box.get(0));
                    for (i = 0; i < box.length; i++) {
                        if (box[i].name == sellerId) {
                            box[i].checked = false;
                        }
                    }
                },
                deleteAll: function () {
                    var box = $('.box');
                    let url = "delete";
                    arr = [];
                    let arrSeller = [];
                    let array = [];
                    for (i = 0; i < box.length; i++) {
                        box[i].checked = true;
                        arr.push(box[i].value);
                        arrSeller.push(box[i].name);
                    }

                    console.log(arr[0]);
                    for (k = 0; k < arr.length; k++) {
                        if (array == null) {
                            array.push({sellerId: arrSeller[0], id: arr[0]});
                        } else if (arrSeller[k] == arrSeller[k - 1]) {
                            array.push({sellerId: arrSeller[k], id: arr[k]});
                        } else if (arrSeller[k] != arrSeller[k - 1]) {
                            array.push({sellerId: arrSeller[k], id: arr[k]});
                        }
                    };
                    console.log(array);
                    //将array存入localStorage
                    localStorage.setItem('GoodsList', JSON.stringify(array));
                    //取出将array存入localStorage
                    let getData = localStorage.getItem('GoodsList');
                    console.log(getData);
                    let params = {updateIds: arr};
                    doPost(url, params, function (resp) {
                        console.log(resp);
                    });
                    location.href = "http://localhost:8080/view_api/checkout.html";
                },
            },
            mounted: function () {
                //页面加载完成，并且vue对象加载完成之后调用
                this.shopCartShow();
                this.unLogin();
            }
        },
    )

</script>